<!doctype html>
<html lang="en" class="fixed">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title>编辑日程</title>

    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="stylesheet" type="text/css"
          href="<?php xcho(loadSource('/assets/plugins/bootstrap/css/bootstrap.min.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/animate.css/animate.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/font-awesome/css/font-awesome.css')) ?>">
    <link rel="stylesheet"
          href="<?php xcho(loadSource('/assets/plugins/data-table/media/css/dataTables.bootstrap.min.css')) ?>">
    <!--    <link rel="stylesheet" href="--><?php //xcho(loadSource('/assets/plugins/ztree/css/zTreeStyle/zTreeStyle.css')) ?><!--">-->
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/layui/css/layui.css')) ?>" media="all">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/ztree/css/metroStyle/metroStyle.css')) ?>" type="text/css">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/style.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/app.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/css/new_main.css')) ?>">
    
    <style>
        *{
            margin: :0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,li,ol,li{
            list-style: none;
        }
        body{
            background: #f4f4f4;
        }
        .add-schedule-content{
            width: 900px;
            margin: 0 auto;
            background: #fff;
            padding-bottom: 20px;
        }
        .add-schedule-content .add-schedule-title{
            padding: 20px;
            border-bottom: 1px #ccc solid;
        }
        .add-schedule-content .add-schedule-cont{
            padding: 10px 20px;
        }
        /*-----------------add-schedule-form------------------*/
        .add-schedule-content .add-schedule-cont .add-schedule-form ul li{
            margin-top: 8px;
        }
        .add-schedule-content .add-schedule-cont .add-schedule-form ul li span{
            font-size: 12px;
        }
        .add-schedule-content .add-schedule-cont .add-schedule-form ul li input{
            border-radius: 5px;
            border: none;
            border: 1px #ccc solid;
            text-indent: 10px;
            font-size: 10px;
        }
        .add-schedule-content .add-schedule-cont .add-schedule-form ul li select{
            width: 60px;
            height: 24px;
            border-radius: 5px;
            border: none;
            border: 1px #ccc solid;
            font-size: 10px;
        }
        .add-schedule-content .add-schedule-cont .add-schedule-form ul li:nth-of-type(3) input{
            margin-left: 8px;
        }
        .add-schedule-content .add-schedule-cont button{
            background: #1ab394;
            border: none;
            padding: 4px 10px;
            color:#fff;
            border-radius: 5px;
            font-size: 12px;
        }
        /*--------------------------table----------------------------*/
        .add-schedule-content .add-schedule-cont .circle-time{
            margin-top: 15px;
        }
        .add-schedule-content .add-schedule-cont .circle-time table {
            width: 100%;
            margin-top: 14px;
        }

        .add-schedule-content .add-schedule-cont .circle-time table thead tr {
            background: rgba(16, 142, 233, .7);
        }

        .add-schedule-content .add-schedule-cont .circle-time table thead tr th {
            padding: 10px;
            color: #fff;
            text-align: center;
        }

        .add-schedule-content .add-schedule-cont .circle-time table tbody tr td {
            padding: 10px;
            text-align: center;
            border: 1px #eee solid;
        }

        .add-schedule-content .add-schedule-cont .circle-time table tbody tr td select {
            width: 90px;
            height: 24px;
            border-radius: 5px;
            border: none;
            border: 1px #ccc solid;
            font-size: 10px;
        }

        .add-schedule-content .add-schedule-cont .circle-time table tbody tr td span {
            margin: 0 5px;
            color: #777;
            position: relative;
            cursor: pointer;
        }

        .add-schedule-content .add-schedule-cont .circle-time table tbody tr td span b {
            width: 40px;
            line-height: 24px;
            background: #fff;
            position: absolute;
            bottom: -28px;
            left: -15px;
            font-weight: normal;
            font-size: 10px;
            color: #000;
            border: 1px #ccc solid;
            border-radius: 5px;
            display: none;
        }

        /*-----------------remarks------------------*/
        .add-schedule-content .add-schedule-cont .remarks{
            margin-top: 10px;
        }
        .add-schedule-content .add-schedule-cont .remarks p{
            float: left;
        }
        .add-schedule-content .add-schedule-cont .remarks textarea{
            overflow: hidden;
            resize: none;
            border: 1px #ccc solid;
            margin-left: 30px;
            text-indent: 10px;
        }
        .add-schedule-content .add-schedule-cont .order-btn{
            height: 40px;
        }
        .add-schedule-content .add-schedule-cont .order-btn .order-btn-cont{
            float: right;
            margin-top: 10px;
        }
        .add-schedule-content .add-schedule-cont .order-btn .order-btn-cont button{
            padding: 2px 10px;
            border:none;
            background: #1ab394;
            color:#fff;
            border-radius: 5px;
            color:#fff;
            margin-right: 10px;
            font-size: 12px;
        }
        .add-schedule-content .add-schedule-cont .order-btn .order-btn-cont button:hover{
            background: #1ab394;
        }
        .add-schedule-content .add-schedule-cont .order-btn .order-btn-cont button:nth-of-type(1){
            background: rgba(215,82,52,.7);
            color:#fff;
        }
        .add-schedule-content .add-schedule-cont .order-btn .order-btn-cont button:nth-of-type(1):hover{
            background: rgba(215,82,52,.6);
        }
        .add-schedule-content .add-schedule-cont .order-btn .order-btn-cont button:nth-of-type(2){
            background: #fff;
            color:#888;
            border: 1px #ccc solid;
        }
    </style>
</head>

<body><?php include_once TPL_PATH . 'public/nav.phtml'; ?>
<div class="add-schedule-content">
    <div class="add-schedule-title">编辑日程</div>
    <div class="add-schedule-cont">
        <div class="add-schedule-form">
            <ul>
                <input type="hidden" id="id" name="id" value="<?php xcho($id)?>">
                <li><span>选择教师：</span><input type="text" id="teacher_name" name="teacher_name" value="<?php xcho($data['teacher_name'])?>"
                                             url="<?php xcho($sSearchTeacher) ?>"></li>
                <input type="hidden" id="teacher_id" name="teacher_id" value="<?php xcho($data['teacher_id'])?>">
                <li><span>添加主题：</span><input type="text" placeholder="固定休假" id="topic" name="topic"
                                             value="<?php xcho($data['topic'])?>"></li>
                <li><span>选择模式：</span><input type="radio" name="repeat_type" value="day"
                        <?php if($data['repeat_type'] == 'day'){ ?> checked="checked"<?php }?>>单次<input
                            type="radio" name="repeat_type" value="weekly"
                        <?php if($data['repeat_type'] == 'weekly'){ ?> checked="checked"<?php }?>>重复
                </li>
                <li>
                    <span>开始时间：</span>
                    <input type="date" id="start_date" name="start_date" value="<?php xcho($data['start_date'])?>">
                    <span class="once-start-time" <?php if($data['repeat_type'] == 'weekly'){?> style="display: none"<?php }?>>
                        <select name="start_hour">
                            <?php foreach ($aHours as $aTmps) { ?>
                                <option value="<?php xcho($aTmps['dict_value']) ?>"
                                    <?php if (isset($data['start_time_str']) &&
                                        $aTmps['dict_value'] == substr($data['start_time_str'],0,2)) { ?>
                                        selected="selected"
                                    <?php } ?>>
                                    <?php xcho($aTmps['cn_name']) ?>
                                </option>
                            <?php } ?>
                        </select> 时
                        <select name="start_minute">
                            <?php foreach ($aMinutes as $aTmps) { ?>
                                <option value="<?php xcho($aTmps['dict_value']) ?>"
                                    <?php if (isset($data['start_time_str']) &&
                                        $aTmps['dict_value'] == substr($data['start_time_str'],2,2)) { ?>
                                        selected="selected"
                                    <?php } ?>>
                                    <?php xcho($aTmps['cn_name']) ?>
                                </option>
                            <?php } ?>
                        </select> 分
                    </span>
                    <span>结束时间：</span>
                    <input type="date" id="end_date" name="end_date" value="<?php xcho($data['end_date'])?>">
                    <span class="once-end-time" <?php if($data['repeat_type'] == 'weekly'){?> style="display: none"<?php }?>>
                        <select name="end_hour">
                            <?php foreach ($aHours as $aTmps) { ?>
                                <option value="<?php xcho($aTmps['dict_value']) ?>"
                                    <?php if (isset($data['end_time_str']) &&
                                        $aTmps['dict_value'] == substr($data['end_time_str'],0,2)) { ?>
                                        selected="selected"
                                    <?php } ?>>
                                    <?php xcho($aTmps['cn_name']) ?>
                                </option>
                            <?php } ?>
                        </select> 时
                        <select name="end_minute">
                            <?php foreach ($aMinutes as $aTmps) { ?>
                                <option value="<?php xcho($aTmps['dict_value']) ?>"
                                    <?php if (isset($data['end_time_str']) &&
                                        $aTmps['dict_value'] == substr($data['end_time_str'],2,2)) { ?>
                                        selected="selected"
                                    <?php } ?>>
                                    <?php xcho($aTmps['cn_name']) ?>
                                </option>
                            <?php } ?>
                        </select> 分
                    </span>
                </li>
            </ul>
        </div>
        <div class="circle-time" <?php if($data['repeat_type'] == 'day'){?> style="display: none" <?php }?>>
            <button onclick="addTr()">添加时间段信息</button>
            <table>
                <thead>
                <tr>
                    <th>时间</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <?php if(isset($data['weekly_info'])){?>
                    <?php foreach ($data['weekly_info'] as $aData){?>
                        <tr>
                            <td>
                                <select name="what_day">
                                    <?php foreach ($aWeek as $aTmp) { ?>
                                        <option value="<?php xcho($aTmp['dict_value']) ?>"
                                        <?php if($aTmp['dict_value'] == $aData['what_day']){?> selected="selected"<?php }?>>
                                            <?php xcho($aTmp['cn_name']) ?>
                                        </option>
                                    <?php } ?>
                                </select>
                            </td>
                            <td>
                                <select name="start_hour">
                                    <?php foreach ($aHours as $aTmp) { ?>
                                        <option value="<?php xcho($aTmp['dict_value']) ?>"
                                            <?php if (isset($aData['every_start_time']) &&
                                                $aTmp['dict_value'] == substr($aData['every_start_time'],0,2)) { ?>
                                                selected="selected"
                                            <?php } ?>>
                                            <?php xcho($aTmp['cn_name']) ?>
                                        </option>
                                    <?php } ?>
                                </select> 时
                                <select name="start_minute">
                                    <?php foreach ($aMinutes as $aTmps) { ?>
                                        <option value="<?php xcho($aTmps['dict_value']) ?>"
                                            <?php if (isset($aData['every_start_time']) &&
                                                $aTmps['dict_value'] == substr($aData['every_start_time'],2,2)) { ?>
                                                selected="selected"
                                            <?php } ?>>
                                            <?php xcho($aTmps['cn_name']) ?>
                                        </option>
                                    <?php } ?>
                                </select> 分
                            </td>
                            <td>
                                <select name="end_hour">
                                    <?php foreach ($aHours as $aTmp) { ?>
                                        <option value="<?php xcho($aTmp['dict_value']) ?>"
                                            <?php if (isset($aData['every_end_time']) &&
                                                $aTmp['dict_value'] == substr($aData['every_end_time'],0,2)) { ?>
                                                selected="selected"
                                            <?php } ?>>
                                            <?php xcho($aTmp['cn_name']) ?>
                                        </option>
                                    <?php } ?>
                                </select> 时
                                <select name="end_minute">
                                    <?php foreach ($aMinutes as $aTmps) { ?>
                                        <option value="<?php xcho($aTmps['dict_value']) ?>"
                                            <?php if (isset($aData['every_end_time']) &&
                                                $aTmps['dict_value'] == substr($aData['every_end_time'],2,2)) { ?>
                                                selected="selected"
                                            <?php } ?>>
                                            <?php xcho($aTmps['cn_name']) ?>
                                        </option>
                                    <?php } ?>
                                </select> 分
                            </td>
                            <td class="paikeDel"><span class="glyphicon glyphicon-trash"><b>删除</b></span></td>
                        </tr>
                    <?php }?>
                <?php }?>
                </tbody>
            </table>
        </div>
        <div class="remarks">
            <p>备注：</p>
            <textarea name="remark" id="remark" cols="100" rows="3" placeholder="请输入备注"><?php xcho($data['remark'])?></textarea>
        </div>
        <div class="order-btn">
            <div class="order-btn-cont">
                <span id="cancel" class="layui-btn layui-btn-primary">取消</span>
                <span id="submit" url="<?php xcho($saveUrl) ?>"  class="layui-btn layui-btn-normal">确定</span>
            </div>
        </div>
    </div>
</div>

<script src="<?php xcho(loadSource('/assets/plugins/jquery/jquery.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/layui/layui.all.js')) ?>" charset="utf-8"></script>
<script src="<?php xcho(loadSource('/assets/plugins/bootstrap/js/bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/jquery.dataTables.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/dataTables.bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/dataTables.responsive.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/responsive.bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets//plugins/ztree/js/jquery.ztree.core.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/layui/layui.all.js')) ?>" charset="utf-8"></script>
<script type="text/javascript" src="<?php xcho(loadSource('/assets/plugins/ztree/js/jquery.ztree.excheck.js')) ?>"></script>
<script type="text/javascript" src="<?php xcho(loadSource('/assets/plugins/ztree/js/jquery.ztree.exedit.js')) ?>"></script>
<script>
    $(".order>ul>li").click(function () {
        var ind = $(this).index();
        $(this).addClass("active").siblings("li").removeClass("active");
        $(".order>.order-content>div").eq(ind).slideDown(200).siblings("div").slideUp(200);
    })
    $("table tr>td>span").hover(function () {
        $(this).find("b").show();
    }, function () {
        $(this).find("b").hide();
    })

    $("input[name='repeat_type']").on('change', function () {
        if ($(this).val() == 'day') {
            $(".circle-time").hide();
            $(".once-start-time").show();
            $(".once-end-time").show();
        } else {
            $(".once-start-time").hide();
            $(".once-end-time").hide();
            $(".circle-time").show();
        }
    })

    $("#teacher_name").focus(function () {
        var index = layer.open({
            type: 2
            , title: false //不显示标题栏
            , closeBtn: false
            , area: 'auto'
            , shade: 0.8
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['确定', '取消']
            , moveType: 1 //拖拽模式，0或者1
            , content: $(this).attr('url')
        });
        layer.full(index);
    });
    //添加时间段
    function addTr() {
        $("table>tbody").append('<tr>'
            + '<td>'
            + '<select name="what_day">'
            + "<?php foreach ($aWeek as $aTmp) { ?>"
            + '<option value="<?php xcho($aTmp['dict_value']) ?>">'
            + "<?php xcho($aTmp['cn_name']) ?>"
            + '</option>'
            + "<?php } ?>"
            + '</select>'
            + '</td>'
            + '<td>'
            + '<select name="start_hour">'
            + "<?php foreach ($aHours as $aTmp) { ?>"
            + '<option value="<?php xcho($aTmp['dict_value']) ?>">'
            + "<?php xcho($aTmp['cn_name']) ?>"
            + '</option>'
            + "<?php } ?>"
            + '</select> 时'
            + '<select name="start_minute">'
            + "<?php foreach ($aMinutes as $aTmp) { ?>"
            + '<option value="<?php xcho($aTmp['dict_value']) ?>">'
            + "<?php xcho($aTmp['cn_name']) ?>"
            + '</option>'
            + "<?php } ?>"
            + '</select> 分'
            + '</td>'
            + '<td>'
            + '<select name="end_hour">'
            + "<?php foreach ($aHours as $aTmp) { ?>"
            + '<option value="<?php xcho($aTmp['dict_value']) ?>">'
            + "<?php xcho($aTmp['cn_name']) ?>"
            + '</option>'
            + "<?php } ?>"
            + '</select> 时'
            + '<select name="end_minute">'
            + "<?php foreach ($aMinutes as $aTmp) { ?>"
            + '<option value="<?php xcho($aTmp['dict_value']) ?>">'
            + "<?php xcho($aTmp['cn_name']) ?>"
            + '</option>'
            + "<?php } ?>"
            + '</select> 分'
            + '</td>'
            + '<td class="paikeDel"><span class="glyphicon glyphicon-trash"><b>删除</b></span></td>'
            + '</tr>');
        //删除时间段
        $("tbody>tr>td.paikeDel").click(function () {
            $(this).parent("tr").remove();
        })
    }
    //获取绑定不可修改数据

    $("#submit").click(function () {
        $(".hidden_area").remove();
        var data;
        if ($("input[name='repeat_type']:checked").val() == 'day') {
            data = {
                id : $("#id").val(),
                teacher_id: $("#teacher_id").val(),
                topic: $("#topic").val(),
                repeat_type: $("input[name='repeat_type']:checked").val(),
                start_time: Date.parse(new Date($("#start_date").val() + ' '
                    + $(".once-start-time").find("select[name='start_hour']").val() + ':'
                    + $(".once-start-time").find("select[name='start_minute']").val()))/1000,
                end_time: Date.parse(new Date($("#end_date").val() + ' '
                    + $(".once-end-time").find("select[name='end_hour']").val() + ':'
                    + $(".once-end-time").find("select[name='end_minute']").val()))/1000,
                remark: $("#remark").val(),
            }
        } else {
            var aArr = new Array();
            if($(".circle-time>table>tbody>tr").length>0){
                $.each($(".circle-time>table>tbody>tr"),function () {
                    var aTemp = {
                        every_start_time:$(this).find("select[name='start_hour']").val()
                        + $(this).find("select[name='start_minute']").val(),
                        every_end_time:$(this).find("select[name='end_hour']").val()
                        + $(this).find("select[name='end_minute']").val(),
                        what_day:$(this).find("select[name='what_day']").val(),
                    }
                    aArr.push(aTemp);
                })
            }

            data = {
                id : $("#id").val(),
                teacher_id: $("#teacher_id").val(),
                topic: $("#topic").val(),
                repeat_type: $("input[name='repeat_type']:checked").val(),
                start_date: $("#start_date").val(),
                end_date: $("#end_date").val(),
                remark: $("#remark").val(),
                weekly_info:aArr
            }
        }
        $.ajax({
            url: $("#submit").attr('url'),
            data: data,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                if(data.success==1){
                    $("#cancel").trigger("click");
                }else{
                    $.each(data.errors,function (sKey,aVal) {
                        $("[name='"+sKey+"']").after("<span class='hidden_area' style='color: red;padding-top: 5px;'>"+aVal['message']+"</span>");
                    })
                }
            }
        })
    })
    //关闭添加课程
    $("#cancel").on("click", function () {
        window.history.back();
        //window.parent.$('#index_tabs').tabs('close', '编辑日程');
    })
</script>
    <?php include_once TPL_PATH . 'public/foot_script.phtml'; ?>

<button id="top" style="height: 50px;width: 50px;"></button></body>

</html>

